<template>
  <div class="side-navbar">
    <div class="nav-box">
      <div :style="{left: (76 * activeIndex +48) +'px'}" class="nav-slider"></div>
      <!-- <div class="nav-slider"></div> -->
      <div v-for="(item, index) in navbarItems" :key="item" class="nav-item">
        <div @click="menuClicked(item,index)" :class="{'selected':index==activeIndex}" class="nav-item-text">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: 0
    };
  },

  methods: {
    menuClicked: function (item, index) {
      this.activeIndex = index;
      this.$emit('change', index);
    }
  },
  props: ['navbarItems']
};
</script>
<style src="./index.scss" lang="scss" scoped></style>
